<template>
  <div class="p-tip flex">
    <p
      class="nav"
      :class="[activeNav == item.type ? 'active' : '']"
      v-for="item in navList"
      :key="item.type"
      @click="handleClickNav(item)"
    >
      {{ item.label }}
    </p>
  </div>
</template>
<script>
export default {
  props: {
    navList: {
      type: Array,
      default() {
        return [];
      },
    },
    activeNav: {
      type: String,
      default: "",
    },
  },
  methods: {
    handleClickNav(item) {
      this.$emit("clickNav", item);
    },
  },
};
</script>
<style lang="scss" scoped>
.p-tip {
  padding: 0 20px;
  margin-top: 10px;
  height: 40px;
  border-bottom: 2px solid $color19;
  .nav {
    line-height: 36px;
    padding: 0 10px;
    margin-right: 40px;
    cursor: pointer;
    border-bottom: 3px solid #fff;
  }
  .active {
    color: $mainColor;
    border-bottom-color: $mainColor;
  }
}
</style>
